<template>
	<view class="content">
		<view class="header">
			<view class="inner">
				<view class="pic" @click="choosepic">
					<img :src="prizeData.prizesImage" alt="" mode="heightFix">
				</view>
				<view class="name">
					奖品名称: <view><input type="text" placeholder="请填写奖品名称" v-model="prizeData.prizesName" /></view>
				</view>
				<view class="count">
					奖品数量: <view><input type="text" placeholder="奖品数量" v-model="prizeData.prizesSum" /></view>
				</view>
				<view class="type">
					<picker mode="selector" :range="options" @change="onPickerChange">
						<view class="picker">
							{{type}}
						</view>
					</picker>
				</view>

				<view class="type_sec">
					<TimePicker v-if="type==='定时开奖'" @prizetime='handleChildtime()'></TimePicker>
					<input v-if="type==='满人开奖'" type="text" v-model="prizeData.lotteryNumpeo" placeholder="人数上限">
				</view>
				<view class="type">
					<picker mode="selector" :range="options_2" @change="onPickerChange2">
						<view class="picker">
							{{type2}}
						</view>
					</picker>
				</view>
				<view class="type_sec">
					<input v-if="type2==='到店领奖'" type="text" v-model="prizeData.lotteryAddress" placeholder="门店名称">
				</view>
				<view class="textarea">
					<view class="tit">
						抽奖说明<view class="rt">T</view>
					</view>
					<textarea v-model="prizeData.prizesDescription" placeholder="请输入文字" />
				</view>
				<view style="padding: 2vh 0;">显示设置</view>
				
				<view class="setting-item">
					<text>限制地区领奖</text>
					<switch :checked="isHidePrizeQuantityEnabled" @change="toggleHidePrizeQuantity"></switch>
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">开启后，可限制抽奖地区</view>
				</view>
				<view class="setting-item">
					<text>隐藏奖品数量 (VIP可见)</text>
					<switch :checked="isHidePrizeQuantityEnabled" @change="toggleHidePrizeQuantity"></switch>
					<text v-if="isHidePrizeQuantityEnabled && !isVIP" class="vip-info">仅VIP会员可见</text>
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">开启后，在抽奖页不展示奖品数量</view>
				</view>
				<view class="setting-item">
					<text>隐藏参与人数 (VIP可见)</text>
					<switch :checked="isHideParticipantCountEnabled" @change="toggleHideParticipantCount"></switch>
					<text v-if="isHideParticipantCountEnabled && !isVIP" class="vip-info">仅VIP会员可见</text>
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">开启后，在抽奖页不展示参与人数</view>
				</view>
				<view class="setting-item">
					<text>隐藏中奖名单 (VIP可见)</text>
					<switch :checked="isHideWinningListEnabled" @change="toggleHideWinningList"></switch>
					<text v-if="isHideWinningListEnabled && !isVIP" class="vip-info">仅VIP会员可见自己的中奖记录</text>
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">开启后，参与者只能看到自己的中奖记录</view>
				</view>
				<view class="setting-item">
					<text>防止统一用户高频中奖 </text>
					<switch :checked="isHideWinningListEnabled" @change="toggleHideWinningList"></switch>
					<text v-if="isHideWinningListEnabled && !isVIP" class="vip-info">仅VIP会员可见自己的中奖记录</text>
					<view style="font-size: 28rpx;color: #ccc;padding-top: 1vh;">降低近期中奖用户的中奖率，防止重复中奖</view>
				</view>


				<view class="speace"></view>
			</view>

		</view>
		<view class="bottom">
			<view @click="upPrize()">发起抽奖</view>
		</view>
	</view>
</template>

<script>
	import TimePicker from './components/timepicker.vue'

	export default {
		components: {
			TimePicker
		},
		onShow() {
			uni.showModal({
				title: '免责声明',
				content: '我们仅提供发起及参与抽奖的平台，不对第三方发起人行为承担责任，所有抽奖奖品均由发起者提供并发放;本平台会在法律范围内尽可能地规范、督促用户遵守相关法律和平台使用规则，营造一个良好的公平的抽奖平台给用户',
				confirmText:'我知道了',
				showCancel: false,
			})
		},
		data() {
			return {
				options: ['定时开奖', '即抽即开', '满人开奖'],
				options_2: ['快递邮寄', '到店领奖', '联系我领奖'],
				type: '请选择开奖方式',
				type2: '请选择领奖方式',
				selectedIndex: 0, // 默认选中项的索引
				prizeData: {
					prizesImage: 'https://pic.rmb.bdstatic.com/99fbd95e77033b6ee8e3cce58900591f.jpeg',
					prizesName: '',
					prizesSum: 1,
					lotteryType: 1, // 默认显示文本',
					lotteryTime: '',
					prizesDescription: '',
					lotteryNumpeo: '',
					claimMethods: '',
					start: 1,
					lotteryAddress: "",
				},
			}
		},
		onLoad() {

		},
		updated() {
			console.log(this.prizeData);
		},
		methods: {
			choosepic() {
				console.log('选择图片');
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// tempFilePaths 是图片文件的临时路径列表
						const tempFilePaths = res.tempFilePaths;
						this.prizeData.prizesImage = tempFilePaths[0]; // 将选中的图片添加到 images 数组中
					},
				})
			},
			onPickerChange(e) {
				const index = e.mp.detail.value; // 获取选中项的索引
				this.type = this.options[index]
				this.prizeData.lotteryType = index; // 更新显示文本
			},
			onPickerChange2(e) {
				const index = e.mp.detail.value; // 获取选中项的索引
				this.type2 = this.options_2[index]
				this.prizeData.claimMethods = index; // 更新显示文本
			},
			handleChildtime(data) {
				this.prizeData.lotteryTime = data
			},

			// 上传抽奖
			upPrize() {
				let a = this.prizeData
				if (a.prizesName != '' && a.prizesSum != '') {
					if (this.type != '请选择开奖方式') {
						if (a.lotteryType == 0 && a.lotteryTime == '') {
							uni.showToast({
								icon: 'error',
								title: '请选择发奖时间'
							})
						} else {
							uni.showModal({
								title: "提示",
								content: "是否发布本次抽奖？",
								success: (res) => {
									if (res.confirm) {
										this.$api.request({
											url: this.$api.upprize,
											method: 'POST',
											data: this.prizeData
										}).then(res => {
											console.log(res, '请求');
										})
										uni.showToast({
											title: '发布奖品成功'
										})
										setTimeout(() => {
											uni.switchTab({
												url: '/pages/index/index' // 根据你的实际首页路径进行修改
											});
										}, 2000)
									}
								},
								fail: () => {
									return
								}
							})
						}
					} else {
						uni.showToast({
							icon: 'error',
							title: '请选择开奖方式'
						})
					}
				} else {
					uni.showToast({
						icon: 'error',
						title: '必要信息缺失'
					})
				}
			}
		},
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100%;

		.header {
			width: 100%;
			height: 32vh;
			padding-top: 3vh;
			background: linear-gradient(to bottom, red, orange);

			.inner {
				width: 92%;
				margin: 0 auto;
				border-radius: 3vw 3vw 0 0;
				background-color: #eee;
				overflow: hidden;

				.pic {
					width: 100%;
					height: 25vh;
					padding-top: 1vh;
					background-color: #fff;
					display: flex;
					flex-direction: row;
					justify-content: space-around;

					img {
						border-radius: 40rpx;
						height: 100%;
					}
				}

				.name,
				.count,
				{
				width: 94%;
				margin-top: 1vh;
				padding: 0 3%;
				height: 10vh;
				font-size: 36rpx;
				line-height: 10vh;
				background-color: #fff;

				view {
					float: right;
					display: inline-block;
					height: 100%;

					input {
						display: inline;
						line-height: 10vh;
					}
				}
			}


			.type {
				width: 94%;
				margin-top: 1vh;
				padding: 0 3%;
				height: 10vh;
				font-size: 36rpx;
				line-height: 10vh;
				background-color: #fff;
				text-align: center;
			}

			.type_sec {
				input {
					width: 90%;
					margin-top: 1vh;
					padding: 0 5%;
					height: 10vh;
					font-size: 36rpx;
					line-height: 10vh;
					background-color: #fff;
				}
			}

			.addFrom {
				width: 94%;
				margin-top: 1vh;
				padding: 0 3%;
				height: 6vh;
				font-size: 36rpx;
				line-height: 6vh;
				text-align: center;
				background-color: #fff;
				color: orange;
			}

			.textarea {
				background-color: #fff;
				width: 100%;
				margin-top: 2vh;
				border-radius: 3vw 3vw 0 0;

				.tit {
					width: 97%;
					padding-left: 3%;
					height: 8vh;
					line-height: 8vh;
					font-weight: bold;
					font-size: 40rpx;

					.rt {
						float: right;
						height: 100%;
						line-height: 6vh;
						margin-right: 3vw;
						font-size: 45rpx;
						color: #bbb;
					}
				}

				textarea {
					width: 96%;
					height: 20vh;
					padding: 2%;
					font-size: 36rpx;

				}
			}
		}
	}



	.setting-item {
		margin-bottom: 20px;
		// display: flex;
		// align-items: center;
		background-color: #fff;
		position: relative;
		padding: 1vh;
	}

	.setting-item text {
		// flex: 1;
	}

	.setting-item switch {
		position: absolute;
		right: 2vh;
		top: 2vh;
		// float: 1;
		// margin-left: 10px;
	}

	.vip-info {
		color: red;
		font-size: 12px;
		margin-left: 10px;
	}

	.speace {
		height: 20vh;
	}


	.bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 10vh;
		background-color: #fff;
		z-index: 1000;

		view {
			width: 70%;
			height: 6vh;
			margin: 0 auto;
			text-align: center;
			line-height: 6vh;
			color: #fff;
			border-radius: 3vh;
			font-size: 2.5vh;
			background: linear-gradient(to right, red, orange);
		}
	}
	}
</style>